<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-1.11.1.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			width: 50px;
			height: 500px;
			float: left;
		}
		img{
			float: left;
			height: 196px;
			border-top: 1px solid orange;
			border-bottom: 1px solid orange;
			cursor: pointer;
		}
		li{
			height: 20px;
			list-style: none;
			text-align: center;
			line-height: 20px;
			border: 1px solid orange;
			font-size: 12px;
			background: url(./images/lili.jpg);
			cursor: pointer;
		}
		div{
			width: 261px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div>
		<ul id="leftUl">
			<li>女靴</li>
			<li>雪地靴</li>
			<li>冬裙</li>
			<li>呢大衣</li>
			<li>毛衣</li>
			<li>棉服</li>
			<li>女裤</li>
			<li>羽绒服</li>
			<li>牛仔裤</li>
		</ul>
		<img id="midImg" src="./images/女靴.jpg" alt="">
		<ul id="rightUl">	
			<li>女包</li>
			<li>男包</li>
			<li>登山鞋</li>
			<li>皮带</li>
			<li>围巾</li>
			<li>皮衣</li>
			<li>男毛衣</li>
			<li>男棉服</li>
			<li>男靴</li>
		</ul>
	</div>
	<script>
		$(function(){
			var leftUlImgs=["女靴.jpg","雪地靴.jpg","冬裙.jpg","呢大衣.jpg","毛衣.jpg","棉服.jpg","女裤.jpg","羽绒服.jpg","牛仔裤.jpg"];
			var rightUlImgs=["女包.jpg","男包.jpg","登山鞋.jpg","皮带.jpg","围巾.jpg","皮衣.jpg","男毛衣.jpg","男棉服.jpg","男靴.jpg"];
			//以上：将所有图片分别放入两个数组，分为左右
			$("#leftUl li").mouseenter(function(){//左边选项卡的点击事件
				$("ul li").css("background","url(./images/lili.jpg)");//还原左边所有选项为默认状态
				$(this).css("background","url(./images/abg.gif)");//使点击后的选项背景变换
				var index=$(this).index();//获取选中的li的索引值

				var ImgSrc="./images/"+leftUlImgs[index];//通过索引值确定位于数组中对应图片的地址，并且通过字符串拼接获得完整地址
				$("#midImg").attr("src", ImgSrc);//点击后更改图片为对应图片
			})
			//以下注释同上，因分了两个ul所以再写一遍右边
			$("#rightUl li").mouseenter(function(){
				$("ul li").css("background","url(./images/lili.jpg)");//还原左边所有选项为默认状态
				$(this).css("background","url(./images/abg.gif)");
				var index=$(this).index();

				var ImgSrc="./images/"+rightUlImgs[index];
				$("#midImg").attr("src", ImgSrc);
			})

			//鼠标离开清空所有，恢复默认
			$("div").mouseleave(function(){
				$("ul li").css("background","url(./images/lili.jpg)");
				$("#midImg").attr("src", "./images/女靴.jpg");
			})
		})
	</script>
</body>
</html>